<div class="routes" [style.flex-basis.px]="routesWidth">
  <dui-button-group style="margin: 6px 12px;">
    <dui-tab-button [active]="view === 'http'" routerLink="/api/console" [queryParams]="{view: 'http'}">HTTP</dui-tab-button>
    <dui-tab-button [active]="view === 'rpc'" routerLink="/api/console" [queryParams]="{view: 'rpc'}">RPC</dui-tab-button>

    <dui-button textured style="margin-left: auto" [openDropdown]="env">{{store.state.activeEnvironment?.name}}</dui-button>
    <dui-dropdown #env>
      @for (e of store.state.environments; track $index; let i = $index) {
        <dui-dropdown-item
          [selected]="store.state.activeEnvironment === e"
          (click)="store.state.activeEnvironment = e; updateRouteState()"
        >{{e.name}}</dui-dropdown-item>
      }
      <dui-dropdown-separator></dui-dropdown-separator>
      <dui-dropdown-item (click)="newEnvironment()">New Environment</dui-dropdown-item>
    </dui-dropdown>

    <dui-icon name="settings" clickable (click)="openEnvironment()"></dui-icon>
  </dui-button-group>

  <div class="filter">
    @if (view === 'http') {
      <dui-input round lightFocus placeholder="Filter ..." [(ngModel)]="store.state.viewHttp.filterPath" (ngModelChange)="updateFilter()"></dui-input>
      <dui-button-group padding="none">
        <dui-select small style="width: 85px;" textured [(ngModel)]="store.state.viewHttp.filterMethod" (ngModelChange)="updateFilter()">
          <dui-option [value]="''">All methods</dui-option>
          @for (label of methods; track $index) {
            <dui-option [value]="label">{{label}}</dui-option>
          }
        </dui-select>
        <dui-select small style="width: 65px;" textured [(ngModel)]="store.state.viewHttp.filterCategory" (ngModelChange)="updateFilter()">
          <dui-option [value]="''">All categories</dui-option>
          @for (label of httpCategories; track $index) {
            <dui-option [value]="label">{{label}}</dui-option>
          }
        </dui-select>
        <dui-select small style="width: 65px;" textured [(ngModel)]="store.state.viewHttp.filterGroup" (ngModelChange)="updateFilter()">
          <dui-option [value]="''">All groups</dui-option>
          @for (label of httpGroups; track $index) {
            <dui-option [value]="label">{{label}}</dui-option>
          }
        </dui-select>
      </dui-button-group>
    }
    @if (view === 'rpc') {
      <dui-input round lightFocus placeholder="Filter ..." [(ngModel)]="store.state.viewRpc.filterPath" (ngModelChange)="updateFilter()"></dui-input>
      <dui-button-group padding="none">
        <dui-select small style="width: 65px;" textured [(ngModel)]="store.state.viewRpc.filterCategory" (ngModelChange)="updateFilter()">
          <dui-option [value]="''">All categories</dui-option>
          @for (label of rpcCategories; track $index) {
            <dui-option [value]="label">{{label}}</dui-option>
          }
        </dui-select>
        <dui-select small style="width: 65px;" textured [(ngModel)]="store.state.viewRpc.filterGroup" (ngModelChange)="updateFilter()">
          <dui-option [value]="''">All groups</dui-option>
          @for (label of rpcGroups; track $index) {
            <dui-option [value]="label">{{label}}</dui-option>
          }
        </dui-select>
      </dui-button-group>
    }
  </div>

  @if (view === 'rpc') {
    <dui-list [class.group-by-controller]="store.state.viewRpc.groupBy === 'controller'"
      [ngModel]="store.state.action" (ngModelChange)="navigateToAction($event)">
      @for (action of filteredActions; track $index; let i = $index) {
        @if (store.state.viewRpc.groupBy === 'controller') {
          @if (!filteredActions[i - 1] || filteredActions[i - 1].controllerClassName !== action.controllerClassName) {
            <dui-list-title class="action" (click)="toggleRpcSection(action.controllerPath)">
              <dui-icon clickable [name]="!store.state.viewRpc.closed[action.controllerPath] ? 'arrow_down' : 'arrow_right'"></dui-icon>
              {{action.controllerClassName}} <span class="path">{{action.controllerPath}}</span>
            </dui-list-title>
          }
        }
        @if (store.state.viewRpc.groupBy !== 'controller' || !store.state.viewRpc.closed[action.controllerPath]) {
          <dui-list-item [value]="action" class="action">
            @if (store.state.viewRpc.groupBy !== 'controller') {
              <span class="signature">{{action.controllerClassName}}.</span>
              }{{action.methodName}}(<span class="signature">{{action.parameterSignature}}</span>): <span class="signature">{{action.returnSignature}}</span>
              @if (store.state.viewRpc.showDescription && action.description) {
                <div class="list-description">
                  {{action.description}}
                </div>
              }
            </dui-list-item>
          }
        }
      </dui-list>
    }

    @if (view === 'http') {
      <dui-list [class.group-by-controller]="store.state.viewHttp.groupBy === 'controller'"
        [ngModel]="store.state.route" (ngModelChange)="navigateToRoute($event)">
        @for (route of filteredRoutes; track $index; let i = $index) {
          @if (store.state.viewHttp.groupBy === 'controller') {
            @if (!filteredRoutes[i - 1] || filteredRoutes[i - 1].controller !== route.controller) {
              <dui-list-title class="action" (click)="toggleHttpSection(route.controller)">
                <dui-icon clickable [name]="!store.state.viewHttp.closed[route.controller] ? 'arrow_down' : 'arrow_right'"></dui-icon>
                {{route.controller}}
              </dui-list-title>
            }
          }
          @if (store.state.viewHttp.groupBy === 'method') {
            @if (!filteredRoutes[i - 1] || filteredRoutes[i - 1].httpMethods[0] !== route.httpMethods[0]) {
              <dui-list-title>
                {{route.httpMethods[0]}}
              </dui-list-title>
            }
          }
          @if (store.state.viewHttp.groupBy !== 'controller' || !store.state.viewHttp.closed[route.controller]) {
            <dui-list-item [value]="route">
              <div class="list-item">
                <div class="path">
                  {{route.path}}
                </div>
                <div class="method text-light">{{route.httpMethods.join(', ')}}</div>
              </div>
              @if (store.state.viewHttp.showDescription && route.description) {
                <div class="list-description">
                  {{route.description}}
                </div>
              }
            </dui-list-item>
          }
        }
      </dui-list>
    }

    <div class="actions-bottom">
      <dui-checkbox class="center" [(ngModel)]="store.state.viewHttp.showDescription" (ngModelChange)="store.store()">Description</dui-checkbox>
      <div class="group-by">
        <span style="margin-right: 5px;">Group by:</span>
        @if (view === 'http') {
          <dui-select textured small [(ngModel)]="store.state.viewHttp.groupBy" (ngModelChange)="updateFilter()">
            <dui-option value="none">Nothing</dui-option>
            <dui-option value="controller">Controller</dui-option>
            <dui-option value="method">Method</dui-option>
          </dui-select>
        }
        @if (view === 'rpc') {
          <dui-select textured small [(ngModel)]="store.state.viewRpc.groupBy" (ngModelChange)="updateFilter()">
            <dui-option value="none">Nothing</dui-option>
            <dui-option value="controller">Controller</dui-option>
          </dui-select>
        }
      </div>
    </div>

    <dui-splitter [size]="routesWidth" inverted (sizeChange)="routesWidth = $event; cd.detectChanges()" position="right"></dui-splitter>
  </div>

  @if (view === 'rpc') {
    <div class="rpc-form overlay-scrollbar-small">
      @if (store.state.action; as action) {
        <api-console-action-detail [action]="action"></api-console-action-detail>
      }
    </div>
  }

  @if (view === 'http') {
    <div class="http-form overlay-scrollbar-small">
      @if (store.state.route; as route) {
        @if (store.state.routeStates[route.id]; as routeState) {
          <api-console-route-detail #httpRouteDetail [route]="route" [routeState]="routeState" (executed)="updateRequests()"></api-console-route-detail>
        }
      }
    </div>
    <api-console-http-routes #httpRequests (executeSelectedRoute)="executeSelectedRoute()"></api-console-http-routes>
  }
